<template>
  <div>
    <my-header></my-header>
    <div class="middle">
      <div class="crumbs">
        <a href="/hangzhou">结婚</a>
        >
        <a href="/hunpin">结婚用品</a>
        >
        <a href="/hunpin/list_545">婚房套装</a>
        >{{detail.title}}
      </div>
      <div class="td-detail">
        <!-- 左边 -->
        <div class="td-zuo">
          <div class="detail-left">
            <div class="detail-big-img big-video">
              <em style="display: none">
                <b></b>
              </em>
              <img
                oncontextmenu="return false"
                :src="detail.img[imgindex]"
              />
            </div>
            <ul class="clearfix">
              <li class="detail-list-img" style="">
                <span class="clearfix" style="width: 500px">
                  <i class="on" v-for="(item,i) of detail.img" :key="i">
                    <img
                      oncontextmenu="return false"
                      src-data="https://qnm.hunliji.com/o_1ee7lrls7r3lu1l191mk74pea2f.jpg"
                      :src="item"
                      @click='selectimg(i)'
                    />
                  </i>
                </span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 中间 -->
        <div class="td-zhong">
          <h1>{{detail.title}}</h1>
          <div class="biaoqian1025">
            <em class="cursorpoint">
              <a href="/hunpin/list_5">婚房布置</a>
            </em>
          </div>
          <div class="td-rmb">
            <!--活动标签-->
            <em class="td-rmb-sty">¥</em>
            <em class="td-rmb-num">{{detail.price}}</em>
            市场价
            <s>
              <em>¥</em>
              127.10
            </s>
          </div>
          <div class="dt-choice">
            <ul>
              <li class="dt-choice-color">
                <dl class="clearfix">
                  <dt>颜色</dt>
                  <dd>
                    <i data-sale="129.00" data-market="127.10"
                      >婚房布置懒人包（挂帘/拉花/两款气球/喜字/脚垫/送静电贴）</i
                    >
                    <i data-sale="728.00" data-market="811.00"
                      >凤冠霞帔婚床四件套（送娃娃抱枕各一对）</i
                    >
                    <i data-sale="828.00" data-market="938.10"
                      >婚房布置满分包（含全套懒人包+婚床四件套）</i
                    >
                  </dd>
                </dl>
              </li>
              <li class="dt-choice-num">
                <dl class="clearfix">
                  <dt>数量</dt>
                  <dd>
                    <div class="dt-choice-num-count clearfix">
                      <div class="minus">－</div>
                      <div class="num" >
                        <input value="1"
                          type="text"
                          onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9]+/,'');}).call(this)"
                          onblur="this.v();"
                        />
                      </div>
                      <div class="plus">＋</div>
                    </div>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
          <div class="td-but">
            <button
              class="on openbox2"
              data-title="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
              data-price="129.00"
              open-title="下载婚礼纪APP　随时随地任性买"
            >
              立即购买
            </button>
            <button
              class="join-cart openbox2"
              data-title="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
              data-price="129.00"
              open-title="下载婚礼纪APP　获取更多信息"
            >
              加入购物车
            </button>
          </div>
          <div class="td-down">
            下载手机版,随时随地任性买！
            <span>
              <img
                oncontextmenu="return false"
                alt="下载二维码"
                title="下载二维码"
                src="http://qnm.hunliji.com/o_19vq1b9ka1u3aan01s4n1v8qpe9k.png"
              />
            </span>
          </div>
          <div class="ctrl">
            <span open-title="下载婚礼纪APP　获取更多信息">
              <em></em>
              {{detail.shoucang}}
            </span>
            <dl>
              <dt>分享</dt>
              <dd>
                <div class="bdsharebuttonbox" data-tag="shares2">
                  <a
                    class="bds_sqq"
                    style="
                      width: 30px;
                      height: 30px;
                      padding: 0;
                      background: rgba(0, 0, 0, 0)
                        url('http://qnm.hunliji.com/o_19tpdng6jpuj14vneli39h89ki.jpg')
                        no-repeat scroll 0 0;
                    "
                    data-cmd="sqq"
                    title="分享到QQ好友"
                  ></a>
                  <div class="item">QQ</div>
                  <div style="clear: both"></div>
                  <a
                    class="bds_tsina"
                    style="
                      width: 30px;
                      height: 30px;
                      padding: 0;
                      background: rgba(0, 0, 0, 0)
                        url('http://qnm.hunliji.com/o_19tpdng6jpuj14vneli39h89ki.jpg')
                        no-repeat scroll -30px 0;
                    "
                    data-cmd="tsina"
                    title="分享到新浪微博"
                  ></a>
                  <div class="item">新浪微博</div>
                  <div style="clear: both"></div>
                  <a
                    class="bds_weixin"
                    style="
                      width: 30px;
                      height: 30px;
                      padding: 0;
                      background: rgba(0, 0, 0, 0)
                        url('http://qnm.hunliji.com/o_19tpdng6jpuj14vneli39h89ki.jpg')
                        no-repeat scroll -60px 0;
                    "
                    data-cmd="weixin"
                    href="#"
                    title="分享到微信"
                  ></a>
                  <div class="item">微信</div>
                  <div style="clear: both"></div>
                </div>
              </dd>
            </dl>
          </div>
        </div>
        <!-- 右边 -->
        <div class="td-you">
          <h3>
            <div class="line" style="left: 0"></div>
            <p>热卖推荐</p>
            <div class="line" style="right: 0"></div>
          </h3>
          <dl class="gotoUrl" target_url="/ShopProduct/productDetail/id/133349">
            <dt>
              <img
                oncontextmenu="return false"
                alt="娘家女方、婆家男方婚房客厅全屋布置"
                title="娘家女方、婆家男方婚房客厅全屋布置"
                src="https://qnm.hunliji.com/o_1e6lv5j581huf1alk17sk1f4q4jf4n.jpg?imageView2/1/w/175/h/175"
              />
              <span>娘家女方、婆家男方婚房客厅全屋布置</span>
              <em></em>
            </dt>
            <dd class="clearfix">
              <span>¥76.00</span>
              <s>7920</s>
            </dd>
          </dl>
          <dl class="gotoUrl" target_url="/ShopProduct/productDetail/id/133187">
            <dt>
              <img
                oncontextmenu="return false"
                alt="男方中式新房卧室装饰创意婚房布置套装"
                title="男方中式新房卧室装饰创意婚房布置套装"
                src="https://qnm.hunliji.com/o_1ee7r7mcsf0k989158oa8m1ij22t.jpg?imageView2/1/w/175/h/175"
              />
              <span>男方中式新房卧室装饰创意婚房布置套装</span>
              <em></em>
            </dt>
            <dd class="clearfix">
              <span>¥76.00</span>
              <s>4758</s>
            </dd>
          </dl>
        </div>
      </div>

      <div class="td-xx">
        <!--套餐分类-->
        <div class="case-left">
          <dl class="case-left1">
            <a href="/shop/detail_331232"
              ><img
                oncontextmenu="return false"
                alt="婚礼纪犀选"
                title="婚礼纪犀选"
                src="https://qnm.hunliji.com/o_1eqpatigh1hf2fignjr52812sgg.png?imageView2/1/w/260/h/260"
            /></a>
            <dt>
              <a href="/shop/detail_331232"
                >婚礼纪犀选
                <!---->
              </a>
            </dt>
            <dd class="fans-goods">
              粉丝数<span class="fans-num">8518</span>累计销量<span
                class="goods-num"
                >786339</span
              >
            </dd>
            <dd class="openbox4" open-title="下载婚礼纪APP　获取更多信息">
              私信商家<i
                class="xicon wedding-chat-product"
                data-gid="6748613"
              ></i>
            </dd>
            <dd>
              <button
                class="openbox4 attention"
                open-title="下载婚礼纪APP　获取更多信息"
              >
                关注</button
              ><button
                class="gotoUrl enterShop"
                target_url="/shop/detail_331232"
              >
                进入店铺
              </button>
            </dd>
          </dl>
          <h2 class="publich2" style="padding-bottom: 0">
            <span>同类推荐</span>
          </h2>
          <div class="recommend">
            <dl style="margin-bottom: 20px">
              <dt>
                <a href="/hunpin/detail_132605" target="_blank"
                  ><img
                    src="https://qnm.hunliji.com/o_1evrnqdd81eqj1l101e3d1ejs1m0a1j.jpg?imageView2/1/w/240/h/240"
                    alt="五粮液东方娇子佳品52度500ml"
                /></a>
              </dt>
              <dd>
                <p class="gotoUrl" target_url="/hunpin/detail_132605">
                  五粮液东方娇子佳品52度500ml
                </p>
              </dd>
              <dd class="clearfix"><span>¥89.00</span><i>214215</i></dd>
            </dl>
            <dl style="margin-bottom: 20px">
              <dt>
                <a href="/hunpin/detail_134840" target="_blank"
                  ><img
                    src="https://qnm.hunliji.com/o_1esuv7jfunlj5cce9c1epg1e331j.jpg?imageView2/1/w/240/h/240"
                    alt="【A4套餐】52度五粮液五粮陈500ml+红酒"
                /></a>
              </dt>
              <dd>
                <p class="gotoUrl" target_url="/hunpin/detail_134840">
                  【A4套餐】52度五粮液五粮陈500ml+红酒
                </p>
              </dd>
              <dd class="clearfix"><span>¥188.00</span><i>142633</i></dd>
            </dl>
            <dl style="margin-bottom: 20px">
              <dt>
                <a href="/hunpin/detail_132946" target="_blank"
                  ><img
                    src="https://qnm.hunliji.com/o_1evca26ev1bgpbf32ralh5agp1j.jpg?imageView2/1/w/240/h/240"
                    alt="【A4套餐】52度五粮液五粮陈500ml+红酒"
                /></a>
              </dt>
              <dd>
                <p class="gotoUrl" target_url="/hunpin/detail_132946">
                  【A4套餐】52度五粮液五粮陈500ml+红酒
                </p>
              </dd>
              <dd class="clearfix"><span>¥387.00</span><i>142687</i></dd>
            </dl>
            <dl style="margin-bottom: 20px">
              <dt>
                <a href="/hunpin/detail_132105" target="_blank"
                  ><img
                    src="https://qnm.hunliji.com/o_1euuvdogg1sdp56fb2v3e01fv31j.jpg?imageView2/1/w/240/h/240"
                    alt="五粮液39度500ml  浓香型白酒"
                /></a>
              </dt>
              <dd>
                <p class="gotoUrl" target_url="/hunpin/detail_132105">
                  五粮液39度500ml 浓香型白酒
                </p>
              </dd>
              <dd class="clearfix"><span>¥769.00</span><i>101276</i></dd>
            </dl>
          </div>
        </div>
        <div class="td-xxdate">
          <div id="scrolltab">
            <div class="bg20"></div>
            <dl class="tab-qieh3">
              <dd class="on">
                <a onclick="gotoAnchor('merchant_description')">商家描述</a>
              </dd>
              <dd><a onclick="gotoAnchor('merchant_values')">图文详情</a></dd>
              <dd><a onclick="gotoAnchor('hot-recommend')">热门推荐</a></dd>
            </dl>
          </div>
          <div class="xxdate" id="merchant_description">
            <div class="xxdate-hpbox">
              <h3>商家描述</h3>
              <p></p>
            </div>
            <div class="xxdate-hpbox" id="merchant_values">
              <h3>图文详情</h3>
             <div class="hpbox-pics">
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk277f19rcatd1jm83iu2l.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk3c22hvbfmj13ne6dd2m.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk31voc1lpl19i4b00pnc2n.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk3en7n7q7f01bressi2o.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk31tel1cucplk94s1pv82p.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk3jjtkpd1ehg1ulu62q.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk3pvi14qvaq61i3g9j2r.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk494kcue17ss1mq1ssu2t.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk4f1b1j251dm013lm10st2u.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk41bd41b2et28ffk2e12v.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk4jtcnj7kcd6qqgs630.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk43tskd21up610gbdb631.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
                <img
                  src="https://qnvideo.hunliji.com/o_1dt3n8tk4aa81mu2ahpim01hsb32.jpg"
                  alt="【包邮】【超值性价比】婚房布置速成大礼包 轻松布置 "
                  class="xx-imgs"
                />
              </div>
            </div>
            <div class="xxdate-hpbox" id="hot-recommend">
              <h3>热门推荐</h3>
              <div class="hot-rec-list clearfix">
                <dl>
                  <dt>
                    <a href="/hunpin/detail_132605" target="_blank">
                      <img
                        src="https://qnm.hunliji.com/o_1evrnqdd81eqj1l101e3d1ejs1m0a1j.jpg?imageView2/1/w/178/h/178"
                        alt="五粮液东方娇子佳品52度500ml"
                    /></a>
                  </dt>
                  <dd>
                    <p>
                      <a href="/hunpin/detail_132605" target="_blank"
                        >五粮液东方娇子佳品52度500ml</a
                      >
                    </p>
                    <div class="clearfix">
                      <span>¥89.00</span>
                      <i>214215</i>
                    </div>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <a href="/hunpin/detail_134840" target="_blank">
                      <img
                        src="https://qnm.hunliji.com/o_1esuv7jfunlj5cce9c1epg1e331j.jpg?imageView2/1/w/178/h/178"
                        alt="【A4套餐】52度五粮液五粮陈500ml+红酒"
                      />
                    </a>
                  </dt>
                  <dd>
                    <p>
                      <a href="/hunpin/detail_134840" target="_blank"
                        >【A4套餐】52度五粮液五粮陈500ml+红酒</a
                      >
                    </p>
                    <div class="clearfix">
                      <span>¥188.00</span>
                      <i>142633</i>
                    </div>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <a href="/hunpin/detail_132946" target="_blank">
                      <img
                        src="https://qnm.hunliji.com/o_1evca26ev1bgpbf32ralh5agp1j.jpg?imageView2/1/w/178/h/178"
                        alt="【A4套餐】52度五粮液五粮陈500ml+红酒"
                      />
                    </a>
                  </dt>
                  <dd>
                    <p>
                      <a href="/hunpin/detail_132946" target="_blank"
                        >【A4套餐】52度五粮液五粮陈500ml+红酒</a
                      >
                    </p>
                    <div class="clearfix">
                      <span>¥387.00</span>
                      <i>142687</i>
                    </div>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <a href="/hunpin/detail_132105" target="_blank">
                      <img
                        src="https://qnm.hunliji.com/o_1euuvdogg1sdp56fb2v3e01fv31j.jpg?imageView2/1/w/178/h/178"
                        alt="五粮液39度500ml  浓香型白酒"
                      />
                    </a>
                  </dt>
                  <dd>
                    <p>
                      <a href="/hunpin/detail_132105" target="_blank"
                        >五粮液39度500ml 浓香型白酒</a
                      >
                    </p>
                    <div class="clearfix">
                      <span>¥769.00</span>
                      <i>101276</i>
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
            <div
              style="display: none"
              id="page_show"
              url="/Detail/MoreCommentV2/id/90075"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  props:["lid"],
  data(){
    return{
      detail:{img:['']},
      imgindex:0

    }
  },
  methods:{
    selectimg(i){
      if(i==this.imgindex)return;
      this.imgindex = i;
    },
    loaddetail(){
      console.log("调用了")
      this.axios.get(`/shopping/list2?lid=${this.lid}`).then(result=>{
      console.log(result)
      this.detail=result.data[0]
      this.detail.img=this.detail.img.split(',')
      console.log(this.detail.img)

    })
    }
    
  },
  mounted(){
    console.log(this.lid),
    this.loaddetail()
		document.title="婚品采购"

  }
}
</script>
<style scoped>
.crumbs {
  width: 1200px;
  margin: 20px auto 0 auto;
  font-size: 14px;
}

.crumbs a {
  color: #666;
}

.crumbs a:hover {
  color: #ff5c5c;
}
.middle {
  position: relative;
  overflow: hidden;
  padding-bottom: 80px;
  width: 100%;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
.crumbs {
  width: 1200px;
  margin: 20px auto 0 auto;
  font-size: 14px;
}
.crumbs a {
  color: #666;
}
body a {
  text-decoration: none;
  cursor: pointer;
}
a,
a:active,
a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}
.td-detail {
  width: 1200px;
  margin: 20px auto 0 auto;
}
.detail-left {
  width: 480px;
  height: 580px;
  background: #fff;
  float: left;
  text-align: center;
}
.detail-big-img {
  width: 480px;
  height: 478px;
  border: none;
}
.big-video {
  position: relative;
}
element.style {
  display: none;
}
.big-video em {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
}
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
.big-video em b {
  width: 60px;
  height: 60px;
  background: url(http://qnm.hunliji.com/o_19uji7qatf001r4udmj10e28mu32.png);
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.detail-big-img img {
  max-height: 478px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
img {
  border: 0;
  vertical-align: middle;
}
.clearfix {
  overflow: hidden;
}
ol,
ul,
li {
  list-style: none outside none;
}
.detail-list-img {
  width: 480px;
  overflow: hidden;
  margin-top: 20px;
  padding-left: 2px;
  float: left;
}
element.style {
  width: 500px;
}
.detail-list-img span {
  display: block;
  width: auto;
  height: 80px;
}
detail-list-img i:first-child {
  margin-left: 0px;
}
.detail-list-img .on {
  border-color: #ff5c5c;
}
.detail-list-img i {
  margin-right: 0;
}
.detail-list-img i {
  width: 78px;
  height: 78px;
  float: left;
  margin-right: 20px;
  border: 1px solid #e7e7e7;
  cursor: pointer;
  background: #fafafa;
}
.detail-list-img .on img {
  width: 76px;
  height: 76px;
  border: 1px solid #ff5c5c;
}
.detail-list-img i img {
  width: 78px;
  height: 78px;
  float: left;
}
img {
  border: 0;
  vertical-align: middle;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
/* 中间 */
.td-zhong {
  width: 480px;
  min-height: 460px;
  margin-left: 30px;
  float: left;
  position: relative;
}
.td-zhong h1 {
  width: 100%;
  font-weight: normal;
  font-size: 20px;
  color: #333;
  line-height: 30px;
}
.td-zhong .biaoqian1025 {
  float: left;
  margin-bottom: 20px;
  width: 100%;
}
.td-zhong .biaoqian1025 em {
  margin: 10px 0;
  float: left;
}
.cursorpoint {
  cursor: pointer;
}
.td-zhong .biaoqian1025 em a {
  font-size: 12px;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-radius: 3px;
  padding: 3px 8px;
  color: #999;
  margin-right: 10px;
}
.td-rmb {
  width: 100%;
  color: #999;
  font-size: 12px;
  margin-top: 10px;
}
.td-rmb-sty {
  font-size: 18px;
  color: #ff5c5c;
}
.td-rmb-num {
  font-size: 30px;
  color: #ff5c5c;
  margin-right: 6px;
  font-family: Arial;
}
.dt-choice {
  margin-top: 25px;
}
ol,
ul,
li {
  list-style: none outside none;
}
.clearfix {
  overflow: hidden;
}
.dt-choice-color dt {
  margin-top: 6px;
}
.dt-choice dt {
  width: 30px;
  margin-right: 25px;
  float: left;
  color: #999;
}
.dt-choice dd {
  float: left;
  width: 425px;
}
.dt-choice-color dd i {
  display: inline-block;
  padding: 6px 8px;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  color: #666;
  margin: 0 8px 10px 0;
  cursor: pointer;
}
.dt-choice-num {
  margin-top: 20px;
}
ol,
ul,
li {
  list-style: none outside none;
}
.dt-choice-num dt {
  line-height: 28px;
}
.dt-choice dt {
  width: 30px;
  margin-right: 25px;
  float: left;
  color: #999;
}
.dt-choice dd {
  float: left;
  width: 425px;
}
.dt-choice-num-count {
  width: 100px;
  height: 26px;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
}
.dt-choice-num-count .minus {
  font-size: 27px;
  line-height: 23px;
}
.dt-choice-num-count .minus,
.dt-choice-num-count .plus {
  width: 26px;
  height: 26px;
  float: left;
  background: #f8f8f8;
  font-size: 25px;
  text-align: center;
  line-height: 24px;
  color: #bbb;
  cursor: pointer;
}
.dt-choice-num-count .num {
  width: 46px;
  height: 26px;
  float: left;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  line-height: 26px;
}
.dt-choice-num-count .num input {
  width: 32px;
  height: 26px;
  border: none;
  padding: 0 7px;
  color: #666;
  text-align: center;
}
.dt-choice-num-count .minus,
.dt-choice-num-count .plus {
  width: 26px;
  height: 26px;
  float: left;
  background: #f8f8f8;
  font-size: 25px;
  text-align: center;
  line-height: 24px;
  color: #bbb;
  cursor: pointer;
}
.td-but button:first-child {
  margin-right: 20px;
}
.td-but .on {
  background: #f83244;
  color: #fff;
}
.td-but button {
  width: 148px;
  height: 50px;
  border: 1px solid #f83244;
  background: #fff;
  border-radius: 4px;
  margin: 15px 0px 0 0;
  color: #f83244;
  font-size: 18px;
}
button {
  cursor: pointer;
  outline: none;
  vertical-align: middle;
}
.td-down {
  text-decoration: underline;
}
.td-down {
  width: 100%;
  color: #ff5c5c;
  margin-top: 20px;
  position: relative;
  cursor: pointer;
  text-decoration: underline;
}
.td-down:before {
  content: "";
  background: url(http://qnm.hunliji.com/o_19ulbgto31gbdr92pej145gpt2i.png)
    no-repeat;
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 5px;
}
.td-down span {
  width: 100px;
  height: 100px;
  border: 1px solid #e8e8e8;
  text-align: center;
  line-height: 100px;
  position: absolute;
  top: 3px;
  left: 220px;
  background: #fff;
  display: none;
}
img {
  border: 0;
  vertical-align: middle;
}
.ctrl {
  position: static;
  margin-top: 53px;
  width: 100%;
  float: left;
  bottom: 8%;
  left: 0;
}
.ctrl span {
  width: 133px;
  color: #666;
  float: left;
}
.ctrl span em {
  width: 12px;
  height: 12px;
  float: left;
  background: url(http://qnm.hunliji.com/o_1an1ll37ge1kd94jlvdum1por7.png);
  background-position: -126px -200px;
  margin-top: 3px;
  margin-right: 5px;
}
.ctrl dl {
  width: 130px;
  float: left;
  position: relative;
  z-index: 99;
}
.ctrl dt {
  color: #666;
}
.ctrl dt:before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(http://qnm.hunliji.com/o_1an1ll37ge1kd94jlvdum1por7.png);
  background-position: -140px -200px;
  float: left;
  margin: 4px 5px 0 0;
}
.ctrl dd {
  width: 110px;
  border: 1px solid #e7e7e7;
  position: absolute;
  background: #fff;
  padding: 10px 14px;
  display: none;
}
.bdsharebuttonbox {
  z-index: 99;
}
element.style {
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(0, 0, 0, 0)
    url(http://qnm.hunliji.com/o_19tpdng6jpuj14vneli39h89ki.jpg) no-repeat
    scroll 0 0;
}
.ctrl dd a {
  display: block;
  float: left;
}
body a {
  color: #666;
  text-decoration: none;
  cursor: pointer;
}
.ctrl dd .item {
  line-height: 30px;
  float: left;
  height: 30px;
  margin: 6px;
}
element.style {
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(0, 0, 0, 0)
    url(http://qnm.hunliji.com/o_19tpdng6jpuj14vneli39h89ki.jpg) no-repeat
    scroll -30px 0;
}
element.style {
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(0, 0, 0, 0)
    url(http://qnm.hunliji.com/o_19tpdng6jpuj14vneli39h89ki.jpg) no-repeat
    scroll -60px 0;
}
/* 右边 */
.td-you {
  width: 175px;
  float: right;
}
.td-you h3 {
  width: 100%;
  position: relative;
  height: 16px;
  margin-bottom: 23px;
  font-size: 16px;
  font-weight: normal;
  color: #333;
}
.td-you h3 .line {
  width: 45px;
  height: 0.5px;
  background: #e7e7e7;
  position: absolute;
  top: 11px;
}
.td-you h3 p {
  text-align: center;
}
.td-you dl {
  margin-top: 8px;
}
.gotoUrl {
  cursor: pointer;
}
td-you dt {
  height: 175px;
}
.td-you dt {
  width: 175px;
  height: 108px;
  position: relative;
  cursor: pointer;
  position: relative;
}
.td-you dt img {
  height: 175px;
}
.td-you dt img {
  width: 175px;
  height: 108px;
}
img {
  border: 0;
  vertical-align: middle;
}
.td-you dt span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.td-you dt span {
  width: 100%;
  line-height: 24px;
  height: 24px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  bottom: 0;
  left: 0;
  color: #fff;
  position: absolute;
  font-size: 12px;
  text-indent: 5px;
  z-index: 10;
}
td-you dd {
  clear: both;
}
.td-you dd {
  width: 100%;
  line-height: 30px;
}
.clearfix {
  overflow: hidden;
}
.td-you dd span {
  float: left;
}
.td-you dd span {
  color: #ff5c5c;
  margin-right: 5px;
}
.td-you dd s {
  float: right;
  padding-left: 20px;
  background: url(http://qnm.hunliji.com/o_1ae6le65l1sidplq1nqtsrksab7.png)
    no-repeat 2px 9px;
  text-decoration: none;
}
.td-you dd s {
  color: #999;
  font-size: 12px;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.td-xx {
  width: 1200px;
  margin: 0 auto;
  padding-top: 40px;
  clear: both;
}
/* 套餐分类 */
.case-left {
  width: 280px;
  float: left;
}
.case-left1 {
  width: 300px;
  padding: 30px;
  border: 1px solid #e7e7e7;
}
body a {
  color: #666;
  text-decoration: none;
  cursor: pointer;
}
.case-left1 img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 0 45px;
}
img {
  border: 0;
  vertical-align: middle;
}
.case-left1 dt {
  font-size: 18px;
  color: #333;
  margin-top: 20px;
  text-align: center;
}
.case-left1 dt a {
  color: #333;
}
a,
a:active,
a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}
.case-left1 .fans-goods {
  color: #999;
}
.case-left1 dd {
  text-align: center;
}
.case-left1 dd {
  margin-top: 10px;
  color: #666;
  overflow: hidden;
}
.case-left1 .fans-goods .fans-num,
.case-left1 .fans-goods .goods-num {
  color: #666;
  padding: 0 15px 0 6px;
}
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
.case-left1 dd {
  text-align: center;
}
.case-left1 dd {
  margin-top: 10px;
  color: #666;
  overflow: hidden;
}
.case-left1 dd i {
  width: 18px;
  height: 18px;
  background-position: -154px -200px;
  margin-left: 4px;
  cursor: pointer;
}
.xicon {
  background: url(http://qnm.hunliji.com/o_1an1ll37ge1kd94jlvdum1por7.png);
  vertical-align: middle;
}
.case-left1 dd {
  text-align: center;
}
.case-left1 dd {
  margin-top: 10px;
  color: #666;
  overflow: hidden;
}
.case-left1 dd button.attention {
  background: #ffc722;
  opacity: 0.9;
}
.case-left1 dd button {
  border: none;
  color: #fff;
}
.case-left1 dd button {
  width: 98px;
  height: 30px;
  border: 1px solid #ff5c5c;
  border-radius: 4px;
  background: #fff;
  color: #ff5c5c;
  margin: 4px;
}
button {
  cursor: pointer;
}
.case-left1 dd button.enterShop {
  background: #4bcf99;
  opacity: 0.9;
}
.case-left1 dd button {
  border: none;
  color: #fff;
}
.case-left1 dd button {
  width: 98px;
  height: 30px;
  border-radius: 4px;
  margin: 4px;
}
.gotoUrl {
  cursor: pointer;
}
element.style {
  padding-bottom: 0;
}
.case-left h2 {
  border: none;
}
.case-left h2 {
  width: 100%;
  border-bottom: 1px solid #e7e7e7;
  font-size: 20px;
  padding-bottom: 10px;
  font-weight: normal;
  margin: 20px 0;
}
element.style {
  padding-bottom: 0;
}
.case-left h2 {
  border: none;
}
.case-left h2 {
  width: 100%;
  font-size: 20px;
  font-weight: normal;
  margin: 20px 0;
}
.publich2 span {
  height: 20px;
  border-left: 4px solid #ff5c5c;
  line-height: 20px;
  padding: 0 10px;
  color: #333;
}
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
.case-left .recommend {
  width: 280px;
}
element.style {
  margin-bottom: 20px;
}
.case-left .recommend dl {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;
  padding: 19px 19px 14px;
}
.case-left .recommend dl dt img {
  width: 240px;
  height: 240px;
}
img {
  border: 0;
  vertical-align: middle;
}
.case-left .recommend dl dd p {
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  height: 40px;
  line-height: 40px;
}
.gotoUrl {
  cursor: pointer;
}
.case-left .recommend dl dd span {
  float: left;
  color: #ff5165;
}
.case-left .recommend dl dd i {
  float: right;
  padding-left: 20px;
  background: url(http://qnm.hunliji.com/o_1ae6le65l1sidplq1nqtsrksab7.png)
    no-repeat 4px 2px;
  text-decoration: none;
  color: #999;
  font-size: 12px;
}
.td-xxdate {
  width: 890px;
  float: right;
  border: 1px solid #e7e7e7;
  border-top: 0;
}
.bg20 {
  width: 100%;
  height: 20px;
  background: #fff;
  display: none;
}
.tab-qieh3 {
  width: 888px;
  background: #fafafa;
  border-bottom: 1px solid #e7e7e7;
  position: relative;
  height: 40px;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
input,
textarea,
p,
blockquote {
  margin: 0;
  padding: 0;
  /* font-size: 100%; */
  font-weight: normal;
}
.tab-qieh3 dd:first-child.on {
  left: 0;
}
.tab-qieh3 dd.on {
  width: 136px;
  border-top: 2px solid #ff5c5c;
  height: 42px;
  background: #fff;
  box-sizing: border-box;
  z-index: 2;
  position: relative;
  top: -1px;
  left: -1px;
}
.tab-qieh3 dd {
  width: 136px;
  float: left;
  height: 38px;
  text-align: center;
  border-top: 2px solid #fafafa;
}
.tab-qieh3 dd:first-child.on a {
  border-left: 0;
}
.tab-qieh3 dd.on a {
  color: #ff5c5c;
  height: 40px;
  line-height: 40px;
  margin-top: 0;
  border-left: 1px solid #e7e7e7;
}
.tab-qieh3 dd a {
  height: 16px;
  line-height: 16px;
  margin-top: 11px;
  display: block;
  border-right: 1px solid #e7e7e7;
  /* border-width: 0 1px; */
  cursor: pointer;
}
body a {
  color: #666;
  text-decoration: none;
  cursor: pointer;
}
.xxdate {
  width: 780px;
  float: left;
  padding: 0 53px 40px;
}
.xxdate-hpbox {
  margin-top: 40px;
}
.xxdate-hpbox h3 {
  font-size: 18px;
  height: 25px;
  line-height: 25px;
  color: #333;
  padding-left: 30px;
  background: url(http://qnm.hunliji.com/o_1ae6qce8bc4e7kc1gc71upv14sbc.png)
    no-repeat 1px 4px;
  padding-bottom: 14px;
  border-bottom: 1px dotted #e8e8e8;
  margin-bottom: 20px;
}
.hot-rec-list{
  width: 780px;
}
.xxdate-hpbox .hot-rec-list dl {
    width: 178px;
    margin-right: 22px;
    float: left;
}
.xxdate-hpbox p {
  color: #666;
  line-height: 30px;
}
.xxdate-hpbox .hpbox-pics {
  padding: 0 50px;
}
.xxdate-hpbox .hpbox-pics img {
  width: 680px;
  margin: 0;
}
.xx-imgs {
  max-width: 680px;
}
img {
  border: 0;
  vertical-align: middle;
}
.xxdate-hpbox {
  margin-top: 40px;
}
.xxdate-hpbox h3 {
  font-size: 18px;
  height: 25px;
  line-height: 25px;
  color: #333;
  padding-left: 30px;
  background: url(http://qnm.hunliji.com/o_1ae6qce8bc4e7kc1gc71upv14sbc.png)
    no-repeat 1px 4px;
  padding-bottom: 14px;
  border-bottom: 1px dotted #e8e8e8;
  margin-bottom: 20px;
}
.xxdate-hpbox .hot-rec-list dl {
  width: 178px;
  height: 229px;
  margin-right: 22px;
  float: left;
}
.xxdate-hpbox .hot-rec-list dl dt img {
  width: 178px;
  height: 178px;
}
img {
  border: 0;
  vertical-align: middle;
}
.xxdate-hpbox .hot-rec-list dl dd {
  border: 1px solid #e8e8e8;
  padding: 5px 12px;
}
.xxdate-hpbox .hot-rec-list dl dd p {
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 25px;
  line-height: 25px;
}
.xxdate-hpbox .hot-rec-list dl dd span {
  float: left;
  color: #ff5165;
}
.xxdate-hpbox .hot-rec-list dl dd i {
  float: right;
  padding-left: 20px;
  background: url(http://qnm.hunliji.com/o_1ae6le65l1sidplq1nqtsrksab7.png)
    no-repeat 4px 2px;
  text-decoration: none;
  color: #999;
  font-size: 12px;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.xxdate-hpbox .hot-rec-list dl:nth-child(4n) {
  margin-right: 0px;
}
.xxdate-hpbox .hot-rec-list dl {
  width: 178px;
  float: left;
}
</style>